<template>
  <div class="home" ref="app">
    <div class="title-box">
      <!-- <img src="@/assets/home/title.png" alt="" srcset="" /> -->
      <PageTitle :src="'home/title2.png'">
        湘雅二院代谢内分泌科
      </PageTitle>
      <div class="button-box">
        <el-radio-group v-model="currPage" size="mini" @change="changePage">
          <el-radio-button :label="1">采集概况</el-radio-button>
          <el-radio-button :label="2">趋势分析</el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div style="padding: 0 30px">
      <div class="top-container" style="display: flex;justify-content: space-around;gap:30px">
        <div class="top-left box-border" style="flex:1;width:0;display:flex;justify-content: space-around;padding:30px 0">
          <div>
            <div class="color-text font-bold font-18 text-center">
              总入组数
            </div>
            <div class="sample-num">
              <div class="w-full">
                <dv-digital-flop
                  :config="flopConfig1"
                  style="width: 141px; height: 42px; margin: 0 auto"
                />
                <p class="unit">单位：人</p>
              </div>
            </div>
          </div>
          <div>
            <div class="color-text font-bold font-18 text-center">
              上月入组数
            </div>
            <div class="sample-num">
              <div class="w-full">
                <dv-digital-flop
                  :config="flopConfig2"
                  style="width: 141px; height: 42px; margin: 0 auto"
                />
                <p class="unit">单位：人</p>
              </div>
            </div>
          </div>
        </div>
        <div class="top-center box-border" style="flex:1;width:0">
          <div>
            <div class="color-text font-bold font-18 text-center">
              总门诊数
            </div>
            <div class="sample-num">
              <div class="w-full">
                <dv-digital-flop
                  :config="flopConfig3"
                  style="width: 141px; height: 42px; margin: 0 auto"
                />
                <p class="unit">单位：人</p>
              </div>
            </div>
          </div>
          <div>
            <div class="color-text font-bold font-18 text-center">
              上月门诊数
            </div>
            <div class="sample-num">
              <div class="w-full">
                <dv-digital-flop
                  :config="flopConfig4"
                  style="width: 141px; height: 42px; margin: 0 auto"
                />
                <p class="unit">单位：人</p>
              </div>
            </div>
          </div>
        </div>
        <div class="top-right box-border" style="flex:1;width:0">
          <div>
            <div class="color-text font-bold font-18 text-center">
              总住院数
            </div>
            <div class="sample-num">
              <div class="w-full">
                <dv-digital-flop
                  :config="flopConfig5"
                  style="width: 141px; height: 42px; margin: 0 auto"
                />
                <p class="unit">单位：人</p>
              </div>
            </div>
          </div>
          <div>
            <div class="color-text font-bold font-18 text-center">
              上月住院数
            </div>
            <div class="sample-num">
              <div class="w-full">
                <dv-digital-flop
                  :config="flopConfig6"
                  style="width: 141px; height: 42px; margin: 0 auto"
                />
                <p class="unit">单位：人</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom-container" style="display: flex;justify-content: space-around;gap:30px">
        <div class="bottom-left" style="flex:1;width:0">
          <div class="bottom-left-top box-border">
            <CommonTitle :px="styleUtil.px2vh(23)">
              <template #title>
                采集数据量
              </template>
            </CommonTitle>
            <div class="title-border"></div>
            <div class="bottom-left-content">
              <PieChart :seriesData="seriesData"></PieChart>
            </div>
          </div>
          <div class="bottom-left-top box-border">
            <CommonTitle :px="styleUtil.px2vh(23)">
              <template #title>
                门诊住院费
              </template>
            </CommonTitle>
            <div class="title-border"></div>
            <div class="bottom-left-content">
              <bar-chart :seriesData="seriesData2" :extraOption="extraOption" />
            </div>
          </div>
        </div>
        <div class="bottom-center box-border" style="flex:1;width:0">
          <CommonTitle :px="styleUtil.px2vh(23)">
            <template #title>
              中国地图
            </template>
          </CommonTitle>
            <div class="title-border"></div>
            <div class="bottom-center-content">
              <Map />
            </div>
        </div>
        <div class="bottom-right" style="flex:1;width:0">
          <div class="bottom-right-top box-border">
            <CommonTitle :px="styleUtil.px2vh(23)">
              <template #title>
                今日数据采集条数
              </template>
            </CommonTitle>
            <div class="title-border"></div>
            <div class="bottom-left-content">
              <dv-charts
                :option="caijiOption"
                :key="currentIndex.second"
                style="width: 100%; height: 240px"
              />
            </div>
          </div>
          <div class="bottom-right-top box-border">
            <CommonTitle :px="styleUtil.px2vh(23)">
              <template #title>
                今日就诊人数
              </template>
            </CommonTitle>
            <div class="title-border"></div>
            <div class="bottom-left-content">
              <dv-charts
                :option="menzhenOption"
                :key="currentIndex.second"
                style="width: 100%; height: 240px"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Map from '@/components/MapChart';
import CommonTitle from '@/components/CommonTitle';
import PageTitle from '@/components/PageTitle';
import { fitChartSize } from '@/utils/echartUtils.js';
import PieChart from '@/components/PieChart';
import BarChart from '@/components/BarChart';
import { tableData, tableHeader } from './tableData.js';
import {getStatistics,getHospitals, getcaijiData} from '@/api/home'
import { ChangePageMixin } from '@/mixins/changePage.js';
import { cloneDeep } from 'lodash';
const dataList = [
  [34733, 42599, 49244, 58902, 68627, 71529],
  [14491, 27475, 35764, 46506, 56585, 58988],
  [756, 1771, 2521, 3716, 5113, 5468],
  [12019, 24347, 33780, 47164, 59580, 63248],
];
const barOption = {
  type: 'bar',
  barWidth:30,
  stack: 'total', 
  label: { 
    show: true,
    textStyle: {
      color: '#fff',
    } 
  }
}
export default {
  name: 'App',
  mixins: [ChangePageMixin],
  data() {
    return {
      currPage:1,
      title: require('@/assets/home/title.png'),
      number: [0],
      peopleNumber: [0],
      option1: {
        title: {
          show: false,
        },
        xAxis: {
          name: '',
          data: ['2018', '2019', '2020', '2021', '2022', '2023'],
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            style: {
              fill: '#3ab3ff',
              fontSize: fitChartSize(12),
              rotate: 0,
            },
          },
        },
        yAxis: {
          name: '单位：例',
          data: 'value',
          nameTextStyle: {
            fill: '#3ab3ff',
            fontSize: fitChartSize(12),
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            style: {
              fill: '#3ab3ff',
              fontSize: fitChartSize(12),
              rotate: 0,
            },
          },
          splitLine: {
            style: {
              stroke: '#173f6d',
              lineWidth: 1,
            },
          },
        },
        series: [
          {
            data: [34733, 42599, 49244, 58902, 68627, 71529],
            type: 'line',
            label: {
              show: true,
              formatter: '{value} ',
              style: {
                fontSize: fitChartSize(12),
                fill: '#fff',
              },
            },
            lineArea: {
              show: true,
              gradient: ['rgba(26, 48, 98, 1)', 'rgba(26, 48, 98, 0.3)'],
            },
            linePoint: {
              radius: 4,
            },
          }
        ],
      },
      caijiOption:{},
      menzhenOption:{},
      option2: {
        title: {
          show: false,
        },
        xAxis: {
          name: '',
          data: [
            '基因组',
            '转录组',
            '蛋白质组',
            '代谢组',
            '单细胞转录组',
            '空间转录组',
          ],
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            style: {
              fill: '#3ab3ff',
              fontSize: fitChartSize(12),
              rotate: 30,
              translate: [20, 0],
            },
          },
        },
        yAxis: {
          name: '单位：种',
          data: 'value',
          nameTextStyle: {
            fill: '#3ab3ff',
            fontSize: fitChartSize(12),
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            style: {
              fill: '#3ab3ff',
              fontSize: fitChartSize(12),
              rotate: 0,
            },
          },
          splitLine: {
            style: {
              stroke: '#173f6d',
              lineWidth: 1,
            },
          },
        },
        series: [
          {
            data: [686, 321, 416, 197, 36, 32],
            type: 'bar',
            gradient: {
              color: ['#00c3f1', '#1955fc'],
            },
          },
        ],
      },
      option3: {
        title: {
          show: false,
        },
        grid: {
          top: 30,
          bottom: 20,
        },
        xAxis: {
          name: '',
          data: ['2017', '2018', '2019', '2020', '2021', '2022'],
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            style: {
              fill: '#3ab3ff',
              fontSize: fitChartSize(12),
              rotate: 0,
            },
          },
        },
        yAxis: {
          name: '单位：篇',
          data: 'value',
          min: 0,
          nameTextStyle: {
            fill: '#3ab3ff',
            fontSize: fitChartSize(12),
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            style: {
              fill: '#3ab3ff',
              fontSize: fitChartSize(12),
              rotate: 0,
            },
          },
          splitLine: {
            style: {
              stroke: '#173f6d',
              lineWidth: 1,
            },
          },
        },
        series: [
          {
            data: [31, 38, 44, 90, 102, 127],
            type: 'bar',
            gradient: {
              color: ['#00c3f1', '#1955fc'],
            },
          },
        ],
      },
      seriesData: [],
      seriesData2:[
        // { ...barOption,name:'厦门第一医院', data: [320, 332, 301, 334, 390, 330, 320] },
        // { ...barOption,name:'厦门中山医院', data: [120, 132, 101, 134, 90, 230, 210] },
        // { ...barOption,name:'厦门中医院', data: [220, 182, 191, 234, 290, 330, 310] },
        // { ...barOption,name:'厦门一医院', data: [150, 232, 201, 154, 190, 330, 410] },
      ],
      extraOption:{
        grid: {
          top:0,
          left: fitChartSize(2),
          right: fitChartSize(15),
          bottom: fitChartSize(2),
          containLabel: true,
        },
        xAxis:[{
          type:'value',
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: '#173f6d',
              width: 1,
            },
          },
        }],
        yAxis: [{
          type: 'category',
          nameTextStyle: {
            color: '#3ab3ff',
            fontSize: fitChartSize(12),
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          data:['门诊人数（人）', '住院人次（人）', '人均费用（元）']
        }],
      },
      currentIndex: {
        first: 0,
        second: 0,
      },
      essayList: [
        {
          number: 1,
          src: require('@/assets/queue/science.png'),
        },
        {
          number: 1,
          src: require('@/assets/queue/venercology.png'),
        },
        {
          number: 1,
          src: require('@/assets/queue/jid.png'),
        },
        {
          number: 1,
          src: require('@/assets/queue/pollution.png'),
        },
        {
          number: 1,
          src: require('@/assets/queue/chemosphere.png'),
        },
        {
          number: 1,
          src: require('@/assets/queue/jaad.png'),
        },
        {
          number: 1,
          src: require('@/assets/queue/allergy.png'),
        },
        {
          number: 1,
          src: require('@/assets/queue/el.png'),
        },
        {
          number: 1,
          src: require('@/assets/queue/bjd.png'),
        },
      ],
      config: {
        index: true,
        headerBGC: '#10286b',
        oddRowBGC: '#021549',
        evenRowBGC: '#021549',
        columnWidth: [50],
        rowNum: 4,
        waitTime: 2000,
        header: tableHeader,
        data: tableData,
      },
      flopConfig:{
        number:[0],
        content: '{nt}',
        style: {
          fill: '#fff',
          TextAlign: 'center',
          fontWeight: 'bolder',
          fontSize: fitChartSize(34),
        },
        animationFrame: 50,
      },
      flopConfig1:{},
      flopConfig2:{},
      flopConfig3:{},
      flopConfig4:{},
      flopConfig5:{},
      flopConfig6:{},
      timer: null,
      container: null,
      staticInfo:{}
    };
  },
  components: {
    Map,
    CommonTitle,
    PageTitle,
    PieChart,
    BarChart
  },
  mounted() {
    this.number = [199233];
    let countNmber = [125864];
    this.peopleNumber = countNmber;
    let timeNumber = 0;
    this.timer = setInterval(() => {
      timeNumber++;
      if (timeNumber === 5 * 60) {
        timeNumber = 0;
        countNmber = [countNmber[0] + 3];
      }
      this.peopleNumber = [0];
      this.$nextTick(() => {
        this.peopleNumber = countNmber;
      });
    }, 4000);
    this.getStaticInfo()
    this.getHospitalInfo()
    this.getcaijiInfo()
  },
  beforeDestroy() {
    window.clearInterval(this.timer);
  },
  methods: {
    getStaticInfo(){
      getStatistics().then(res=>{
        console.log(res)
        this.staticInfo = res.rows[0]
        this.flopConfig1 = {
          ...this.flopConfig,
          number:[this.staticInfo.totalGroup]
        }
        this.flopConfig2 = {
          ...this.flopConfig,
          number:[this.staticInfo.lastGroup]
        }
        this.flopConfig3 = {
          ...this.flopConfig,
          number:[this.staticInfo.totalOutpatient]
        }
        this.flopConfig4 = {
          ...this.flopConfig,
          number:[this.staticInfo.lastOutpatient]
        }
        this.flopConfig5 = {
          ...this.flopConfig,
          number:[this.staticInfo.totalHospital]
        }
        this.flopConfig6 = {
          ...this.flopConfig,
          number:[this.staticInfo.lastHospital]
        }
        
      })
    },
    getcaijiInfo(){
      const params={
        pageSize:9999,
        pageNum:1
      }
      getcaijiData(params).then(res=>{
        console.log(res)
        const caijiData = res.rows.filter(item=>item.typename === '采集')
        const menzhenData = res.rows.filter(item=>item.typename === '门诊')
        this.caijiOption = cloneDeep(this.option1)
        this.menzhenOption = cloneDeep(this.option1)
        const parsecaijiData = this.getHisData(caijiData)
        const parsemenzhenData = this.getHisData(menzhenData)
        console.log(parsemenzhenData)
        this.caijiOption.xAxis.data = parsecaijiData.label
        this.menzhenOption.xAxis.data = parsemenzhenData.label
        this.caijiOption.series=[]
        this.menzhenOption.series=[]
        parsecaijiData.data.forEach(item=>{
          this.caijiOption.series.push({
            ...this.option1.series[0],
            data:[...item]
          })
        })
        parsemenzhenData.data.forEach(item=>{
          this.menzhenOption.series.push({
            ...this.option1.series[0],
            data:[...item]
          })
        })
      })
    },
    getHisData(list){
      const _obj={}
      list.forEach(item=>{
        if(!_obj[item.hospital]){
          _obj[item.hospital]=[]
        }
        _obj[item.hospital].push({
          label:item.timedate,
          value:item.count,
        })
      })
      console.log(_obj)
      const keys = Object.keys(_obj)
      const label= []
      const data=[]
      for(let i = 0;i<keys.length;i++){
        const key = keys[i]
        if(!data[i]){
          data[i]=[]
        }
        _obj[key].forEach(item=>{
          if(i===0){
            label.push(item.label)
          }
          data[i].push(item.value)
        })
      }
      return {
        label,
        data
      }
    },
    getHospitalInfo(){
      getHospitals().then(res=>{
        console.log(res)
        if(res.code === 0){
          this.seriesData=[]
          this.seriesData2=[]
          res.rows.forEach(item=>{
            const pieValueItem = {
              name: item.hospitalName,
              value: item.collected,
              label: {
                normal: {
                  show: false,
                  formatter: ' abdomen:{c}', //自定义显示格式(b:name, c:value, d:百分比)
                },
              },
            }
            const barValueItem = {
              ...barOption,
              name: item.hospitalName,
              data: [item.outpatient, item.inpatients,item.capitaCost],
            }
            this.seriesData.push(pieValueItem)
            this.seriesData2.push(barValueItem)
          })
        }
      })
    },
    tabListClick(index, type) {
      this.currentIndex[type] = index;
      this.option1.series[0].data = dataList[index];
    },
    fitChartSize(n) {
      return fitChartSize(n);
    },
  },
};
</script>

<style lang="scss" scoped>
.font-18 {
  font-size: vh(18);
}
.home {
  // display: flex;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
  .title-box {
    width: 100%;
    height: vh(100);
  }
  .top-container{
    display: flex;
    justify-content: space-around;
    gap:30px;

    > div {
      border-radius: 10px;
      color: #fff;
    }
    .top-left,
    .top-center,
    .top-right{
      flex:1;
      width:0;
      display:flex;
      justify-content: space-around;
      padding:30px 0;

      .sample-num {
        width: vw(159);
        height: vh(115);
        background-color: #0b256e;
        border-radius: vw(8);
        text-align: center;
        display: flex;
        align-items: center;
        margin-top: vh(10);

        .unit {
          font-size: vh(12);
          color: #3ab3ff;
        }
      }
    } 
  }

  .bottom-container{
    display: flex;
    justify-content: space-around;
    gap:30px;
    margin-top: vh(20);

    > div {
      border-radius: 10px;
      color: #fff;
    }

    .bottom-left-top,
    .bottom-left-bottom,
    .bottom-center,
    .bottom-right-top,
    .bottom-right-bottom
    {
      border-radius: 10px;
      padding:0 vw(29);
      color: #fff;
    }

    .bottom-left-top{
      height:vh(350);
      margin-bottom: vh(20);
      .bottom-left-content{
        height: vh(240);
      }
    }

    .bottom-center{
      height:vh(720);
      .bottom-center-content{
        height: vh(600);
      }
    }

    .bottom-right-top{
      height:vh(350);
      margin-bottom: vh(20);
      .bottom-left-content{
        height: vh(240);
      }
    }
  }

  .left_container,
  .right_container {
    > div {
      min-width: 250px;
      width: vw(551);
      height: vh(330);
      // background: rgb(202, 202, 202);
      border-radius: 10px;
      padding: 0 vw(29);
      color: #fff;
    }

    .left_top,
    .right_top,
    .right_center {
      margin-bottom: vh(20);
    }

    .left_top{
      height: vh(591);
      .data-source {
        display: flex;
        justify-content: space-between;
        .sample-num {
          width: vw(159);
          height: vh(115);
          background-color: #0b256e;
          border-radius: vw(8);
          text-align: center;
          display: flex;
          align-items: center;
          margin-top: vh(10);

          .unit {
            font-size: vh(12);
            color: #3ab3ff;
          }
        }

        .source-content {
          background-color: #0b256e;
          border-radius: vw(8);
          width: vw(311);
          height: vh(115);
          padding: vh(5) vw(10);
          margin-top: vh(10);
          display: flex;
          flex-flow: row wrap;
          justify-content: space-around;
          > div {
            width: vw(100);
            border-left: 1px solid #3ab3ff;
            margin-top: vh(10);
            padding-left: vw(20);

            .name {
              color: #3ab3ff;
              font-weight: bolder;
              font-size: vh(13);
            }
            .value {
              font-size: vh(16);
              font-weight: bolder;
            }
          }
        }
      }
      .number {
        .tab-list {
          display: flex;
          justify-content: space-around;
          align-items: center;
          > div {
            font-size: vh(16);
            color: #3ab3ff;
            cursor: pointer;
            width: vw(92);
            height: vh(42);
            line-height: vh(42);
          }
          .current-item {
            color: #fff;
            background-color: #004c95;
            border: 1px solid #3ab3ff;
            border-radius: vw(3);
            width: vw(92);
            height: vh(42);
            line-height: vh(42);
          }
        }
      }
    }
    .left_bottom {
      height: vh(330);
      .total {
        font-size: vh(24);
        color: #3ab3ff;
        font-weight: bolder;
        span {
          font-size: vh(34);
          color: #fff;
        }
      }
      .left-bottom-content {
        .num-group {
          display: flex;
          flex-flow: row wrap;
          > div {
            width: vw(150);
            border-left: 1px solid #3ab3ff;
            margin-top: vh(10);
            margin-left: 1px;
            padding-left: vw(20);

            .name {
              color: #3ab3ff;
              font-weight: bolder;
              font-size: vh(18);
            }
            .value {
              font-size: vh(28);
              font-weight: bolder;
            }
          }
        }
      }
    }
    .right_top {
      height: vh(321);
      .right-top-content {
        height: vh(261);
        display: flex;
        justify-content: space-between;

        .color-text {
          font-size: vh(20);
          font-weight: bolder;
          margin-bottom: vh(10);
        }
        .item-box {
          width: vw(159);
          height: vh(157);
          background-color: #0b256e;
          display: flex;
          align-items: center;
          text-align: center;
          border-radius: vw(7);
          > div {
            width: 100%;
          }
          .value {
            font-size: vh(40);
            color: #fff;
            font-weight: bolder;
          }
          .unit {
            font-size: vh(12);
            color: #3ab3ff;
          }
        }
      }
    }
    .right_center {
      height: vh(280);
      .right-center-content {
        height: vh(183);
        .count {
          text-align: center;
          .label {
            font-size: vh(20);
            font-weight: bolder;
          }
          .value {
            font-size: vh(60);
            font-weight: bolder;
            color: #fff;
          }
        }
      }
    }
    .right_bottom {
      height: vh(296);
      .right-bottom-content {
        height: vh(236);
      }
    }
  }

  .center_container {
    // 需要设置一个最小宽高，否则再绘图的时候，发现宽高为0的话会引起Echarts报错
    > div {
      min-width: 600px;
      width: vw(710);
      margin: 0 vh(20);
      padding: 0 vw(29);
    }

    .center_top {
      height: vh(467);
      // background: rgb(202, 202, 202);
      border-radius: vh(10);
      margin-bottom: vh(20);

      .center-top-content {
        width: 100%;
        height: vh(387);
      }
    }

    .center_bottom {
      height: vh(455);
      margin-top: vh(20);
      border-radius: vh(10);

      .center-bottom-content {
        height: vh(379);
        margin-top: 10px;
        .char-box {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .pie-chart {
            width: vw(260);
            height: vh(260);
            .color-text {
              font-size: vh(20);
              margin-bottom: vh(20);
            }
          }
          .bar-chart {
            width: vw(364);
            height: vh(260);
            .color-text {
              font-size: vh(20);
            }
          }
        }
      }
    }
  }
}
.title-border {
  border-bottom: 2px solid #184576;
  margin-bottom: vh(10);
}
</style>
